<template>
	<view>
		<cu-custom bgColor="bg-blue-light" 
		title="非工程建设领域"></cu-custom>
		<view class="bg-blue-light" style="height: 150rpx;border-radius: 0 0 50rpx 50rpx;">
		</view>
		<view class="card" style="height: 304rpx;margin-top: -150rpx;">
			<view class="head">
				欠薪基本情况摘要
			</view>
			<zh-input v-model="arreardesc" placeholder="请将欠薪过程描述清楚，并控制在500字以内" 
			type="textarea" inputMaxlength="500" inputAlign="left" class="textarea"
			:autoHeight="false"></zh-input>
			
		</view>
		<view class="card" style="height: 613rpx;margin-top: 174rpx;">
			<view class="head">
				是否通过以下途径反映过
			</view>
			<radio-group class="block" @change="RadioChange" style="margin-left: 30rpx;">
				<view class="selectText" style="margin-top: 0rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='notProject'?'checked':''" 
					:checked="radio=='notProject'?true:false" value="notProject"></radio>
					<label class="selectText">向劳动保障监察机构投诉</label>
				</view>
				<view class="selectText" style="margin-top: 29rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='project'?'checked':''" 
					:checked="radio=='project'?true:false" value="project"></radio>
					<label class="selectText">向劳动人事争议仲裁机构申请仲裁</label>
				</view>
				<view class="selectText" style="margin-top: 29rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='project'?'checked':''" 
					:checked="radio=='project'?true:false" value="project"></radio>
					<label class="selectText">向人民法院提起诉讼</label>
				</view>
				<view class="selectText" style="margin-top: 29rpx;">
					<radio class='blue radio' style="transform: scale(0.5)" 
					:class="radio=='project'?'checked':''" 
					:checked="radio=='project'?true:false" value="project"></radio>
					<label class="selectText">未经过以上途径反映过</label>
				</view>
			</radio-group>
			<view style="margin-top: 60rpx;">
				<zh-input v-model="details" placeholder="请详细说明情况，并控制在200字以内"
				type="textarea" inputMaxlength="200" inputAlign="left" class="textarea"
				:autoHeight="false"></zh-input>
			</view>
		</view>
		<view class="card" style="height: 231rpx;margin-top: 807rpx;">
			<view class="head">
				验证码
			</view>
			<view class="cu-form-group">
				<input type="text"  maxlength="8" name="" v-model="imgCode" placeholder="请输入验证码"/>
				<image :src="imgSrc" @click="initCode" mode="" class="img-captcha"></image>
			</view>
		</view>
		<view class="button flex flex-direction" 
		style="padding-top: 10rpx;margin-left: 40rpx;">
			<button class="cu-btn shadow margin-tb-sm lg bg-blue-light"
			 style="background-color: #1388ED;" @tap="up">上一步</button>
		</view>
		<view class="button flex flex-direction" 
		style="padding-top: 10rpx;margin-left: 400rpx;">
			<button class="cu-btn shadow margin-tb-sm lg bg-blue-light"
			 style="background-color: #1388ED;" @tap="xiayi">提交</button>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util/util.js';
	import reqConfig from '@/common/config/reqConfig.js';
	import api from '@/api/society/home/nobackpay.js';
	export default {
		data() {
			return {
				pageId:'',
				imgSrc:'',
				imgCode:'',
				aab004: '',
				aab013: '',
				aab301: '',
				aae006: '',
				aab015: '',
				resname: '',
				resphone: '',
				residcard: '',
				arrearnum: '',
				arrearamount: '',
				arreartime: '',
				arreardesc:'',
				details:'',
				radio:null
			}
		},
		onLoad: function (option) {
			this.initCode();
			if (this.$Route.params){
				this.aab004=this.$Route.params.aab004;
				this.aab013=this.$Route.params.aab013;
				this.aab301=this.$Route.params.aab301;
				this.aab015=this.$Route.params.aab015;
				this.aae006=this.$Route.params.aae006;
				this.resname=this.$Route.params.resname;
				this.resphone=this.$Route.params.resphone;
				this.residcard=this.$Route.params.residcard;
				this.arrearnum=this.$Route.params.arrearnum;
				this.arrearamount=this.$Route.params.arrearamount;
				this.arreartime=this.$Route.params.arreartime;
			}	
			console.log(this.aab004)
		},
		onReady() {
			this.pageId=util.uuid();
		},
		methods: {

			initCode() {
				const url = reqConfig.baseUrl+"/app/api/person/getImgCode?pageId="+this.pageId+"&time="+new Date().getTime()
				this.imgSrc=url
			},
			up: function(){
				 let a = this.$Router.back(1)
				         if (a == undefined) {
				         //重新定向跳转页面
				           this.$Router.replaceAll({ name:'noBackPayIndex'})
				         }
						 else{
						 	this.$Router.back(1);
						 }
						 },
			xiayi: function(){
             const data = {};
			 const that = this
			data.aab004 = this.aab004;
			data.aab013 = this.aab013;
			data.aab015 = this.aab015;
			data.aab301 = this.aab301;
			data.aae006 = this.aae006;
			data.resname = this.resname;
			data.resphone = this.resphone;
			data.residcard = this.residcard;
			data.arrearnum = this.arrearnum;
			data.arrearamount = this.arrearamount;
			data.arreartime = this.arreartime;
			data.arreardesc = this.arreardesc;
			data.details = this.details;
			
			this.$http
				.post(api.nproj, data)
				.then(res => {
					uni.showModal({
					    title: '提示',
					    content: '提交成功，感谢您的反馈',
					    success: function (res) {
					        that.$Router.push({name:'noBackPayIndex'})
					    }
					});
				}).catch(error => {
					
				});
			},
			RadioChange(){
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
	.card{
		background: #FFFFFF;
		border-radius: 20rpx;
		width: 690rpx;
		position: absolute;
		margin-left: 30rpx;
		/* padding-left: 31rpx; */
	}
	.button{
		position: absolute;
		margin-top: 1099rpx;
		width: 320rpx;
	}
	.head{
		height: 87rpx;
		width: 690rpx;
		line-height: 87rpx;
		font-family: 'PingFangTC-Medium';
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		letter-spacing: 0;
		margin-left: 30rpx;
	}
	.textarea{
		height: 175rpx;
		width: 613rpx;
		background-color: #F6F6F6;
		/* line-height: 40rpx; */
		letter-spacing: 2;
		word-wrap : break-word;
	}
	.selectText{
		font-family: 'PingFangSC-Regular';
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 0;
		height: 42rpx;
		line-height: 42rpx;
	}
	.img-captcha{
		width: 200rpx;
		line-height: 70rpx;
		height: 70rpx;
		text-align: center;
		margin: 0;
	}
</style>
